/* 彩色主题系统 - 为每个管理页面提供独特的色彩方案 */

/* 对话管理 - 蓝绿主题 */
.chat-content-theme {
  --primary-color: #1890ff;
  --secondary-color: #52c41a;
  --accent-color: #13c2c2;
  --gradient-start: #667eea;
  --gradient-end: #764ba2;
  --card-bg: linear-gradient(135deg, rgba(24, 144, 255, 0.05) 0%, rgba(82, 196, 26, 0.05) 100%);
  --header-bg: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(82, 196, 26, 0.1) 100%);
  --border-color: rgba(24, 144, 255, 0.2);
}

/* 图片解析 - 紫粉主题 */
.image-analysis-theme {
  --primary-color: #722ed1;
  --secondary-color: #eb2f96;
  --accent-color: #f759ab;
  --gradient-start: #667eea;
  --gradient-end: #764ba2;
  --card-bg: linear-gradient(135deg, rgba(114, 46, 209, 0.05) 0%, rgba(235, 47, 150, 0.05) 100%);
  --header-bg: linear-gradient(135deg, rgba(114, 46, 209, 0.1) 0%, rgba(235, 47, 150, 0.1) 100%);
  --border-color: rgba(114, 46, 209, 0.2);
}

/* 用户反馈 - 橙红主题 */
.user-feedback-theme {
  --primary-color: #fa541c;
  --secondary-color: #faad14;
  --accent-color: #ff7875;
  --gradient-start: #ff9a56;
  --gradient-end: #ff6b6b;
  --card-bg: linear-gradient(135deg, rgba(250, 84, 28, 0.05) 0%, rgba(250, 173, 20, 0.05) 100%);
  --header-bg: linear-gradient(135deg, rgba(250, 84, 28, 0.1) 0%, rgba(250, 173, 20, 0.1) 100%);
  --border-color: rgba(250, 84, 28, 0.2);
}

/* Token统计 - 青绿主题 */
.token-stats-theme {
  --primary-color: #13c2c2;
  --secondary-color: #52c41a;
  --accent-color: #73d13d;
  --gradient-start: #36cfc9;
  --gradient-end: #95de64;
  --card-bg: linear-gradient(135deg, rgba(19, 194, 194, 0.05) 0%, rgba(82, 196, 26, 0.05) 100%);
  --header-bg: linear-gradient(135deg, rgba(19, 194, 194, 0.1) 0%, rgba(82, 196, 26, 0.1) 100%);
  --border-color: rgba(19, 194, 194, 0.2);
}

/* 主页 - 彩虹主题 */
.home-theme {
  --primary-color: #1890ff;
  --secondary-color: #52c41a;
  --accent-color: #faad14;
  --gradient-start: #667eea;
  --gradient-end: #764ba2;
  --card-bg: linear-gradient(
    135deg,
    rgba(24, 144, 255, 0.05) 0%,
    rgba(82, 196, 26, 0.05) 50%,
    rgba(250, 173, 20, 0.05) 100%
  );
  --header-bg: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(82, 196, 26, 0.1) 100%);
  --border-color: rgba(24, 144, 255, 0.2);
}

/* 彩色卡片基础类 */
.colorful-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 8px 24px var(--primary-color, #1890ff) 20,
    0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.colorful-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--secondary-color),
    var(--accent-color)
  );
  border-radius: 20px 20px 0 0;
}

.colorful-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 12px 32px var(--primary-color, #1890ff) 30,
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* 彩色搜索卡片 */
.colorful-search-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  backdrop-filter: blur(15px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 4px 16px var(--primary-color, #1890ff) 15;
  position: relative;
  overflow: hidden;
}

.colorful-search-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 16px 16px 0 0;
}

/* 彩色表格 */
.colorful-table .ant-table-thead > tr > th {
  background: var(--header-bg);
  border-bottom: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-weight: 700;
}

.colorful-table .ant-table-tbody > tr:nth-child(odd) {
  background: rgba(255, 255, 255, 0.95);
}

.colorful-table .ant-table-tbody > tr:nth-child(even) {
  background: var(--card-bg);
}

.colorful-table .ant-table-tbody > tr:hover {
  background: linear-gradient(135deg, var(--card-bg), rgba(255, 255, 255, 0.9));
  box-shadow: 0 8px 25px var(--primary-color, #1890ff) 10;
}

/* 彩色按钮 */
.colorful-btn-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border: none;
  border-radius: 12px;
  box-shadow:
    0 8px 24px var(--primary-color, #1890ff) 30,
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transition: all 0.3s ease;
}

.colorful-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px var(--primary-color, #1890ff) 40,
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.colorful-btn-secondary {
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  border: none;
  border-radius: 12px;
  box-shadow:
    0 8px 24px var(--secondary-color, #52c41a) 30,
    0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transition: all 0.3s ease;
}

.colorful-btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px var(--secondary-color, #52c41a) 40,
    0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

/* 彩色标签 */
.colorful-tag-primary {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px var(--primary-color, #1890ff) 20;
}

.colorful-tag-success {
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px var(--secondary-color, #52c41a) 20;
}

.colorful-tag-warning {
  background: linear-gradient(135deg, var(--accent-color), #faad14);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 6px 16px;
  font-weight: 600;
  box-shadow: 0 4px 12px var(--accent-color, #faad14) 20;
}

/* 彩色页面头部 */
.colorful-page-header {
  background: var(--header-bg);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
  border: 2px solid var(--border-color);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.colorful-page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary-color),
    var(--secondary-color),
    var(--accent-color)
  );
  border-radius: 20px 20px 0 0;
}

.colorful-page-header h2 {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 32px;
  font-weight: 800;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 彩色统计卡片 */
.colorful-stats-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    0 8px 24px var(--primary-color, #1890ff) 15;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.colorful-stats-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  border-radius: 20px 20px 0 0;
}

.colorful-stats-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 12px 32px var(--primary-color, #1890ff) 25;
}

.colorful-stats-card .ant-statistic-title {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 14px;
}

.colorful-stats-card .ant-statistic-content {
  color: var(--primary-color);
  font-weight: 700;
}

/* 彩色表单 */
.colorful-form .ant-form-item-label > label {
  color: var(--primary-color);
  font-weight: 600;
}

.colorful-form .ant-input,
.colorful-form .ant-input-number,
.colorful-form .ant-select-selector,
.colorful-form .ant-textarea {
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  transition: all 0.3s ease;
}

.colorful-form .ant-input:focus,
.colorful-form .ant-input-number:focus,
.colorful-form .ant-select-focused .ant-select-selector,
.colorful-form .ant-textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 4px var(--primary-color) 10;
  background: rgba(255, 255, 255, 1);
}

/* 彩色分页 */
.colorful-pagination .ant-pagination-item {
  border: 2px solid var(--border-color);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.colorful-pagination .ant-pagination-item:hover {
  transform: translateY(-2px);
  border-color: var(--primary-color);
  box-shadow: 0 8px 20px var(--primary-color) 20;
}

.colorful-pagination .ant-pagination-item-active {
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  border-color: transparent;
  color: white;
  box-shadow: 0 8px 24px var(--primary-color) 30;
}

/* 彩色模态框 */
.colorful-modal .ant-modal-content {
  border: 2px solid var(--border-color);
  background: var(--card-bg);
  backdrop-filter: blur(20px);
}

.colorful-modal .ant-modal-header {
  background: var(--header-bg);
  border-bottom: 2px solid var(--border-color);
}

.colorful-modal .ant-modal-title {
  color: var(--primary-color);
  font-weight: 700;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .colorful-page-header {
    padding: 24px;
    border-radius: 16px;
  }

  .colorful-page-header h2 {
    font-size: 28px;
  }

  .colorful-card,
  .colorful-search-card {
    border-radius: 16px;
    margin: 0 8px;
  }
}

@media (max-width: 480px) {
  .colorful-page-header {
    padding: 20px;
    border-radius: 12px;
  }

  .colorful-page-header h2 {
    font-size: 24px;
  }

  .colorful-card,
  .colorful-search-card {
    border-radius: 12px;
    margin: 0 4px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .colorful-card,
  .colorful-search-card,
  .colorful-stats-card {
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(40, 40, 40, 0.95));
    border-color: rgba(255, 255, 255, 0.1);
  }

  .colorful-table .ant-table-tbody > tr:nth-child(odd) {
    background: rgba(30, 30, 30, 0.95);
  }

  .colorful-form .ant-input,
  .colorful-form .ant-input-number,
  .colorful-form .ant-select-selector,
  .colorful-form .ant-textarea {
    background: rgba(30, 30, 30, 0.9);
    color: #fff;
  }
}
